import { defineStore } from 'pinia'
import { ref } from 'vue'
import { computed } from 'vue'
import { useUserStore } from './user'
import { insertCartAPI, findNewCartListAPI, delCartAPI } from '@/apis/cart'

export const useCartStore = defineStore(
  'cart',
  () => {
    const userStore = useUserStore()
    // 映射token  到isLogin字段
    const isLogin = computed(() => userStore.userInfo.token)
    // 1. 定义state - cartList 存储购物车列表数据
    const cartList = ref([])

    // 获取最新购物车列表action  并覆盖本地购物车
    const updateNewList = async () => {
      const res = await findNewCartListAPI()
      cartList.value = res.result
    }

    // 2. 定义action - addCart 添加购物车方法
    const addCart = async (goods) => {
      const { skuId, count } = goods
      if (isLogin.value) {
        // 走登录后的加入购物车逻辑 接口
        await insertCartAPI({ skuId, count }) // 加入购物车接口调用
        updateNewList() // 获取最新购物车列表以及覆盖本地购物车
      } else {
        // 走本地逻辑
        // 添加购物车操作
        // 已添加过-count + 1 没有添加过-直接push
        // 思路:通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
        const item = cartList.value.find((item) => goods.skuId === item.skuId)
        if (item) {
          // 找到了，即添加过
          item.count++
          ElMessage.success('添加购物车成功')
        } else {
          // 没有找到，push到购物车列表
          cartList.value.push(goods)
          ElMessage.success('添加购物车成功')
        }
      }
    }

    // 3.删除购物车  action -delCart
    const delCart = async (skuId) => {
      if (isLogin.value) {
        // 走删除接口
        await delCartAPI([skuId]) // 调用删除接口
        updateNewList() // 获取最新购物车列表以及覆盖本地购物车
      } else {
        // 思路:
        // 1．找到要删除项的下标值- splice
        // 2．使用数组的过滤方法- filter
        // findIndex 如果传过来的skuId 等于cartList中的skuId 则找到该元素
        const ids = cartList.value.findIndex((item) => skuId === item.skuId)
        cartList.value.splice(ids, 1)
        // filter方法
        //   const newcartList = cartList.value.filter((item) => item.skuId != skuId)
        //   cartList.value = newcartList
        //   ElMessage.success('删除购物车成功')
      }
    }

    // 退出账号时 清除本地购物车
    const clearCart = () => {
      cartList.value = []
    }

    // 4. 统计购物车商品数量与价格 getters computed  计算属性
    // 头部购物车
    // 1．总的数量所有项的count之和  第一个（）=> 是回调编写计算逻辑 第二个是初始值 0 ; a是每次c累加后都会重新加给a c是每一项
    const allCount = computed(() =>
      cartList.value.reduce((a, c) => a + c.count, 0)
    )
    // 2. 总价 所有项的count*price之和
    const allPrice = computed(() =>
      cartList.value.reduce((a, c) => a + c.count * c.price, 0)
    )
    // 列表购物车
    // 3.已选择数量  因为 .filter((item) => item.selected)过滤后返回的还是一个数组所以可以链式调用
    const selectedCount = computed(() =>
      cartList.value
        .filter((item) => item.selected)
        .reduce((a, c) => a + c.count, 0)
    )
    const selectedPrice = computed(() =>
      cartList.value
        .filter((item) => item.selected)
        .reduce((a, c) => a + c.count * c.price, 0)
    )

    // 4.已选择商品合计

    // 5.单选功能
    const singleCheck = (skuId, selected) => {
      // 通过skuId找到要修改的那一项 然后把它的selected修改为传过来的selected
      const item = cartList.value.find((item) => item.skuId === skuId)
      item.selected = selected
    }

    // 6.是否全选 当下面商品所有状态选中的时候上面全选框才选中
    const isAll = computed(() => cartList.value.every((item) => item.selected))

    // 7. 全选功能 selected(传入全选框的状态)
    const allCheck = (selected) => {
      // 把cartList中的每一项的selected都设置为当前的全选框状态
      cartList.value.forEach((item) => (item.selected = selected))
    }
    return {
      cartList,
      addCart,
      delCart,
      allCount,
      allPrice,
      singleCheck,
      isAll,
      allCheck,
      selectedCount,
      selectedPrice,
      clearCart,
      updateNewList
    }
  },
  {
    persist: true
  }
)
